<template>
  <div class="buy-view">
    <div class="top-nav">
      <van-nav-bar
        title="收银台"
        right-text="订单中心"
        left-arrow
        @click-left="goBack"
        @click-right="goToOrderView"
      />
    </div>
    <div class="content" v-if="totalPrice!=null">
      <div class="title-price"><span>¥</span>{{ totalPrice }}</div>
      <div class="pay-type">
        <div class="title">支付工具</div>
				<van-radio-group v-model="radio">
        <div class="wechat" v-for="(item,index) in 2" :key="index">
          <div class="left">
            <div class="icon" :class="{alipay:index==1}">
							<van-icon :name="index==0?'wechat-pay':'alipay'" />
						</div>
            <div class="text-box">
              <div class="top">{{index==0?'微信支付':'支付宝支付'}}</div>
              <div class="bottom">{{index==0?'财付通支付科技有限公司':'支付宝（中国）网络技术有限公司'}}</div>
            </div>
          </div>
          <div class="right">
              <van-radio :name="index" checked-color="#ee0a24"></van-radio>
          </div>
        </div>
				</van-radio-group>
      </div>
    </div>
		<div class="to-pay" v-if="totalPrice!=null">
			<van-submit-bar :button-text="`确认支付¥${totalPrice}`" @submit="onSubmit" />
		</div>
  </div>
</template>

<script>
export default {
  name: "BuyView",
  data() {
    return {
      // 总价
      totalPrice: null,
      // 单选框匹配值
      radio: "1",
			//订单数据
			orderData:null,
      //定时器
      timer:null,
      //已付款数据
      payedData:[],
      //未付款数据
      payingData:[],
    };
  },
  activated() {
    this.orderData = JSON.parse(localStorage.getItem("orderData"));
    this.totalPrice = this.orderData[0].totalPrice;
    let idArr=[]
    this.timer=setTimeout(() => {
      this.orderData[0].data.forEach(item => {
        idArr.push(item.createTime)
      })
      let shopcartData=JSON.parse(localStorage.getItem("shopcartData"))
      let newShopcartData=[]
      shopcartData.forEach(item => {
        if (idArr.indexOf(item.createTime)==-1) {
          newShopcartData.push(item)
        }
      })
      localStorage.setItem('shopcartData',JSON.stringify(newShopcartData))
      this.timer=null
    }, 150);
    let payedData=JSON.parse(localStorage.getItem("payedData"));
    if (!payedData) {
      localStorage.setItem('payedData',JSON.stringify(this.payedData))
    }else{
      this.payedData=payedData
    }
    let payingData=JSON.parse(localStorage.getItem("payingData"));
    if (!payingData) {
      localStorage.setItem('payingData',JSON.stringify(this.payingData))
    }else{
      this.payingData=payingData
    }
  },
  methods: {
    //返回上两级
    goBack() {
      this.$router.go(-2);
      if (this.orderData[0]) {
        this.payingData.unshift({...this.orderData[0],isPay:false})
      }
      localStorage.setItem('payingData',JSON.stringify(this.payingData))
      this.orderData=[]
			localStorage.setItem('orderData',JSON.stringify(this.orderData))
    },
    //跳转订单中心
    goToOrderView() {
      if (this.orderData[0]) {
			  this.payingData.unshift({...this.orderData[0],isPay:false})
      }
      localStorage.setItem('payingData',JSON.stringify(this.payingData))
      this.orderData=[]
			localStorage.setItem('orderData',JSON.stringify(this.orderData))
      this.$router.push({name:'TicketView',params:{index:0}})
		},
		//提交订单
		onSubmit() {
      if (this.orderData[0]) {
        this.payedData.unshift({...this.orderData[0],isPay:true})
      }
      localStorage.setItem('payedData',JSON.stringify(this.payedData))
      this.orderData=[]
			localStorage.setItem('orderData',JSON.stringify(this.orderData))
      this.$router.push({name:'PayedView'})
		},
  },
};
</script>

<style lang="scss" scoped>
.buy-view {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f5f5f5;
  z-index: 25;
  .top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    ::v-deep .van-nav-bar__content {
      background-color: #f5f5f5;
    }
    ::v-deep .van-nav-bar__text {
      color: #000;
    }
    ::v-deep .van-nav-bar__arrow {
      color: #000;
    }
  }
  .content {
    padding: 50px 10px;
    .title-price {
      font-size: 30px;
      font-weight: 600;
      color: rgb(255, 114, 32);
      margin-top: 30px;
      span {
        font-size: 18px;
      }
    }
    .pay-type {
      width: 100%;
      height: 250px;
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      padding: 10px;
      box-sizing: border-box;
      margin-top: 25px;
      .title {
        font-weight: 600;
        text-align: left;
        height: 40px;
        line-height: 40px;
      }
      .wechat {
        height: 50px;
        line-height: 20px;
        margin-top: 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .icon {
            width: 35px;
            height: 35px;
            border-radius: 999px;
            font-size: 35px;
            margin-right: 15px;
						color: rgb(0, 205, 2);
						&.alipay{
							color: rgb(5, 169, 243);
						}
          }
          .text-box {
            .top {
              font-size: 18px;
              font-weight: 600;
							text-align: left;
            }
            .bottom {
              font-size: 12px;
              color: #aaa;
            }
          }
        }
        .right {
        }
      }
    }
  }
	::v-deep .van-submit-bar__button--danger{
		width: 100%;
		background: rgb(255, 114, 32);
		font-size: 16px;
    z-index: 100;
	}
}
</style>